<script setup>
import { ref, onMounted, computed } from "vue";
import axios from 'axios';
import { useStore } from 'vuex';

const store = useStore();

// 从 Vuex store 中获取用户数据
const user = computed(() => store.getters.getUser);

// 初始化用户数据
const datainit = () => {
  // 如果需要从 API 获取数据，可以在这里调用
  // 但是目前我们直接从 store 获取数据
  // axios.post('/admin/users/findByPhone', { phone: user.value.phone })
  //   .then(response => {
  //     const userData = response.data.date;
  //     store.dispatch('updateUser', userData);
  //   });
};

onMounted(() => {
  datainit();
});

// 笔记数据
const notes = ref({
  noteId: "",
  userId: "",
  publishTime: "",
  imagePath: "",
  content: ""
});

// 图片预览
const pic = ref([]);

// 图片上传处理
const afterRead = (file) => {
  // 创建 FormData 对象以支持文件上传
  let formData = new window.FormData();
  formData.append("file", file.file, file.file.name);

  axios.post("/admin/users/upload", formData).then(response => {
    // 接收服务器返回的图片路径
    notes.value.imagePath = response.data.date;
    pic.value = [{ url: notes.value.imagePath }];
    notes.value.userId = user.value.userId;
  }).catch(error => {
    console.error("Error uploading image:", error);
  });
};

// 定义 onClickLeft 方法
const onClickLeft = () => {
  history.back();
};

// 发布笔记
const onClickRight = () => {
  notes.value.publishTime = new Date();

  axios.post('/admin/notes/create', notes.value)
      .then(response => {
        if (response.data.code === 200) {
          showToast('发布成功');
          // 可以在这里添加跳转到笔记列表页或其他操作
        } else {
          showToast('发布失败');
        }
      })
      .catch(error => {
        console.error("Error creating note:", error);
        showToast('发布失败');
      });
};

// 显示提示信息
const showToast = (message) => {
  alert(message); // 你可以使用更友好的方式显示提示，例如 Vant 的 Toast 组件
};
</script>

<template>
  <van-nav-bar
      title="新笔记"
      left-text=""
      right-text="发布"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  />
  <van-cell-group inset>
    <van-row>
      <van-col span="2">
        <van-image :src="user.profilePicture" :show-delete="false" :style="{ width: '10vw' }" />
      </van-col>
      <van-col span="10">
        <van-field v-model="user.username" label="" placeholder="" readonly />
      </van-col>
    </van-row>
  </van-cell-group>
  <van-cell-group inset>
    <van-field
        label=""
        placeholder="记录你下厨心得,以便给自己备忘"
        v-model="notes.content"
    />
  </van-cell-group>
  <van-uploader
      :after-read="afterRead"
      max-count="1"
      reupload
      v-model="pic"
  ></van-uploader>
</template>

<style scoped>
</style>